<template>
    <div v-if="Array.length" class="DeleteStyle">
        <input type="checkbox" :checked="allDone" @change="selectAll" />
        <p>已办事项{{ havedone }}/全部事项{{ allthing }}</p>
        <button @click="clearpart">清除已办</button>
        <button @click="clearAll">清除所有</button>
    </div>
    <p v-else class="todo-empty">暂无待办事项</p>
</template>
<script setup>
import { computed } from 'vue'

const props = defineProps({
    Array: {
        type: Array,
        required: true,
        default: () => [],
    },
})
const allDone = computed(() => props.Array.every((todo) => todo.done))
const havedone = computed(() => {
    return props.Array.filter((todo) => todo.done).length;
})
const allthing = computed(() => {
    return props.Array.length
})

const selectAll = (event) => {
    emit('selectAll', event.target.checked)
}
const clearpart = () => {
    emit('clearpart')
}
const clearAll = () => {
    emit('clearAll')
}
const emit = defineEmits(['selectAll'], ['clearpart'], ['clearAll'])
</script>
<style scoped>
.DeleteStyle {
    display: flex;
    height: 40px;
    background-color: #87ceeb;
    align-items: center;
    padding: 0 60px;
}

.DeleteStyle p {
    display: flex;
    flex: 1;
}

.DeleteStyle button {
    margin-left: 10px;
    cursor: pointer;
}

.todo-empty {
    text-align: center;
    margin-top: 10px;
}
</style>